<template>
  <div class="mod-marketing-coupon">
    <div class="search-bar">
      <el-form :inline="true" class="search-form" ref="searchForm" :model="searchForm" size="small" >
        <div class="input-row">
          <el-form-item prop="payNo" label="支付单号"  class="search-form-item">
            <el-input v-model="searchForm.payNo"  />
          </el-form-item>
          <el-form-item prop="payeeName" label="收款人名称"  class="search-form-item">
            <el-input v-model="searchForm.sellerUserName"  />
          </el-form-item>
          <el-form-item label="确认结算状态" >
            <el-select v-model="searchForm.confirmSettleStatus" >
              <el-option label="全部"   value="" />
              <el-option label="待确认" :value="1" />
              <el-option label="确认成功" :value="2" />
              <el-option label="确认失败" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="分账订单状态" >
            <el-select v-model="searchForm.divideStatus" >
              <el-option label="全部"   value="" />
              <el-option label="待分账" :value="1" />
              <el-option label="分账成功" :value="2" />
              <el-option label="分账失败" :value="3" />
            </el-select>
          </el-form-item>
          <el-form-item label="是否可结算" >
            <el-select v-model="searchForm.profitType" >
              <el-option label="全部"   value="" />
              <el-option label="可确认结算" :value="1" />
              <el-option label="待收货结算" :value="4" />
            </el-select>
          </el-form-item>
          <el-form-item label="订单类型" >
            <el-select v-model="searchForm.transType" >
              <el-option label="全部" value="" />
              <el-option label="数字发行" :value="1" />
              <el-option label="实物发行" :value="4" />
              <el-option label="二级市场" :value="2" />
            </el-select>
          </el-form-item>
          <el-form-item label="交易时间"  class="search-form-item">
          <el-date-picker
            v-model="dateRangeParam"
            :type="datePickerType"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd HH:mm:ss"
            :range-separator="$t('date.tip')"
            :start-placeholder="$t('date.start')"
            @change="changeDateRangeParam"
            :end-placeholder="$t('date.end')">
          </el-date-picker>
          </el-form-item>
          <div class="default-btn primary-btn marginBottom" style="margin-left: 5px" @click="searchChange()">{{$t('product.search')}}</div>
          <div class="default-btn" style="margin-left: 5px" @click="resetSearchForm('searchForm')">{{$t('product.reset')}}</div>
        </div>
      </el-form>
    </div>
    <div class="main-container">
      <div class="table-con coupon-table">
        <el-table
          ref="couponListTable"
          :data="dataList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%">

          <el-table-column
            prop="payNo"
            label="支付单号"
          >
          </el-table-column>
          <el-table-column
            prop="payAliType"
            label="支付类型"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.payAliType == 1" class="tag-text">普通支付</span>
              <span v-if="scope.row.payAliType == 2" class="tag-text">聚合支付</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="sellerUserName"
            label="卖家名称"
          >
          </el-table-column>
          <el-table-column
            prop="tradeNo"
            label="阿里流水号"
          >
          </el-table-column>

          <el-table-column
            prop="tradeStatus"
            label="支付状态"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.tradeStatus == 1" class="tag-text">支付成功</span>
              <span v-if="scope.row.tradeStatus == 0" class="tag-text">支付失败</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="payAmount"
            label="订单金额"
          >
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="支付时间"
          >
          </el-table-column>

          <el-table-column
            prop="confirmSettleRequestNo"
            label="确认结算请求号"
          >
          </el-table-column>
          <el-table-column
            prop="confirmSettleStatus"
            label="确认结算状态"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.confirmSettleStatus == 1 || scope.row.confirmSettleStatus == 4" class="tag-text">待确认结算</span>
              <span v-if="scope.row.confirmSettleStatus == 2" class="tag-text">手动确认结算成功</span>
              <span v-if="scope.row.confirmSettleStatus == 3" class="tag-text">结算失败</span>
              <span v-if="scope.row.confirmSettleStatus == 5" class="tag-text">账期结算成功</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="confirmSettleTime"
            label="确认结算时间"
          >
          </el-table-column>
          <el-table-column
            prop="confirmSettleRemark"
            label="确认结算备注"
          >
          </el-table-column>
          <el-table-column
            prop="divideStatus"
            label="分账订单状态"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.divideStatus == 1 || scope.row.divideStatus == 4" class="tag-text">待分账</span>
              <span v-if="scope.row.divideStatus == 2" class="tag-text">分账成功</span>
              <span v-if="scope.row.divideStatus == 3" class="tag-text">分账失败</span>
              <span v-if="scope.row.divideStatus == 5" class="tag-text">不分账</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="divideTime"
            label="分账时间"
          >
          </el-table-column>
          <el-table-column
            prop="divideRemark"
            label="分账备注"
          >
          </el-table-column>
          <el-table-column
            prop="actualAmount"
            label="卖家应收货款"
          >
          </el-table-column>

          <el-table-column
            prop="transType"
            label="订单类型"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.transType == 1" class="tag-text">数字发行</span>
              <span v-if="scope.row.transType == 2" class="tag-text">寄售交易</span>
              <span v-if="scope.row.transType == 4" class="tag-text">实物发行</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="profitType"
            label="分账"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.profitType == 1" class="tag-text">可确认结算</span>
              <span v-if="scope.row.profitType == 4" class="tag-text">待收货</span>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('crud.menu')"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="{ row, $index }">
              <el-button type="text" v-if="row.profitType == 1 && (row.confirmSettleStatus == 1 || row.confirmSettleStatus == 4) " @click="confirmSettle(row.tradeNo)">确认结算</el-button>
              <el-button type="text" @click="openSettleInfo(row.divideId)">分账明细</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        v-if="dataList.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>

    <el-dialog
      title="分账明细"
      :visible.sync="dialogVisible"
      :loading="dialogLoading"
      :before-close="handleClose"
    >
      <div class="table-con coupon-table">
        <el-table
          ref="ListTable"
          :data="divideList"
          header-cell-class-name="table-header"
          row-class-name="table-row-low"
          style="width: 100%">

          <el-table-column
            prop="recordId"
            label="分账记录ID"
          >
          </el-table-column>
          <el-table-column
            prop="userType"
            label="待分账支出类型"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.userType == 2" class="tag-text">店铺</span>
              <span v-if="scope.row.userType == 3" class="tag-text">用户</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="transOut"
            label="分账支出方账号"
          >
          </el-table-column>
          <el-table-column
            prop="transInUserType"
            label="待分账收入类型"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.transInUserType == 1" class="tag-text">平台</span>
              <span v-if="scope.row.transInUserType == 2" class="tag-text">店铺</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="transIn"
            label="分账接收账号"
          >
          </el-table-column>
          <el-table-column
            prop="transInName"
            label="分账接收账号名称"
          >
          </el-table-column>
          <el-table-column
            prop="tradeNo"
            label="阿里流水号"
          >
          </el-table-column>
          <el-table-column
            prop="payOrderAmount"
            label="订单金额"
          >
          </el-table-column>
          <el-table-column
            prop="calDivisionAmount"
            label="分账金额"
          >
          </el-table-column>
          <el-table-column
            prop="state"
            label="分账状态"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.state == -1" class="tag-text">待确认分账</span>
              <span v-if="scope.row.state == 0" class="tag-text">待分账</span>
              <span v-if="scope.row.state == 1" class="tag-text">分账成功</span>
              <span v-if="scope.row.state == 2" class="tag-text">分账失败</span>
              <span v-if="scope.row.state == 4" class="tag-text">确认结算异常</span>
              <span v-if="scope.row.state == 5" class="tag-text">账期确认结算（自动确认结算，不支持分账）</span>
            </template>
          </el-table-column>

          <el-table-column
            prop="createTime"
            label="创建时间"
          >
          </el-table-column>
          <el-table-column
            prop="updateTime"
            label="更新时间"
          >
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  components: {
  },
  data () {
    return {
      dateRangeParam: null,
      datePickerType: 'daterange', // 日期筛选类型
      dialogVisible: false,
      dialogLoading: false,
      dataList: [],
      divideList: [],
      dataListLoading: false,
      page: {
        total: 0, // 总页数
        current: 1, // 当前页数
        size: 10 // 每页显示多少条
      },
      searchForm: {
        payNo: null,
        sellerUserName: null,
        confirmSettleStatus:'',
        divideStatus:'',
        tradeStatus: 1,
        transType: '',
        profitType: '',
        startTime: null,
        endTime: null
      },
    }
  },
  created () {
    this.getDataList()
  },
  methods: {
    openSettleInfo(divideId){
      this.dialogVisible = true
      this.dialogLoading = true
      this.$http({
        url: this.$http.adornUrl('/platform/aliSettle/getsettleList'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            {"divideId":divideId}
          ), false
        )
      }).then(({ data }) => {
        this.divideList = data
        this.dialogLoading = false
      })

    },
    confirmSettle(tradeNo){
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/platform/aliSettle/settleConfirm'),
        method: 'post',
        data: this.$http.adornData({
          'tradeNo': tradeNo
        })
      }).then(({ data }) => {
        this.$message({
          message: '确认结算成功',
          type: 'success',
          duration: 1500
        })
        this.dataListLoading = false
        this.getDataList()
      })
    },
    changeDateRangeParam () {
      this.searchForm.startTime = this.dateRangeParam ? this.dateRangeParam[0] : '',
        this.searchForm.endTime = this.dateRangeParam ? this.dateRangeParam[1] : ''
    },
    handleClose () {
      this.dialogVisible = false
    },
    // 获取数据列表
    getDataList () {
      this.dataListLoading = true
      this.$http({
        url: this.$http.adornUrl('/platform/aliSettle/getsettleConfirmList'),
        method: 'get',
        params: this.$http.adornParams(
          Object.assign(
            this.page,
            this.searchForm
          ), false
        )
      }).then(({ data }) => {
        this.dataList = data.records
        this.page.total = data.total
        this.dataListLoading = false
      })
    },
    // 条件查询
    searchChange () {
      this.page.total = 0
      this.page.current = 1
      this.getDataList()
    },
    // 刷新回调用
    refreshChange () {
      this.page.total = 0
      this.page.current = 1
      this.page.size = 10
      this.getDataList(this.page)
    },
    /**
     * 重置表单
     * @param {String} formName 表单名称
     */
    resetSearchForm (formName) {
      this.searchForm = {
        payNo: null,
          sellerUserName: null,
          confirmSettleStatus:'',
          divideStatus:'',
          tradeStatus: 1,
          transType: '',
          profitType: '',
          startTime: null,
          endTime: null
      },
      this.dateRangeParam = null
      this.refreshChange()
    },
    handleSizeChange (val) {
      this.page.size = val
      this.getDataList()
    },
    handleCurrentChange (val) {
      this.page.current = val
      this.getDataList()
    }

  }
}
</script>
<style lang="scss" scoped>
.marginBottom{margin-bottom:20px}
.el-input{
  width: 200px;
}
.el-form-item__label{
  display: block;
  width: 100px!important;
}
.default-btn {
  margin-left: 30px;
}
.btnBox {
  display: flex;
  justify-content: flex-end;
}
</style>
